import 'package:flutter/material.dart';
import 'package:gold/http/api_shop.dart';
import 'package:gold/widgets/http_image.dart';
import 'package:provider/provider.dart';
import 'package:gold/base/provider_scaffold.dart';
import 'package:gold/ui/my/shop/customer/customer_viewmodel.dart';
import 'package:gold/utils/xfg_color.dart';
import 'package:gold/utils/xfg_size.dart';
import 'package:gold/widgets/common_widgets.dart';
import 'package:gold/widgets/xfg_text.dart';
import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';

/// @description: 我的客户
/// @author tangzhentao
/// @created at 22:56 2024/12/14

class CustomerPage extends StatelessWidget {
  const CustomerPage({super.key});

  @override
  Widget build(BuildContext context) {
    return ProviderScaffold<CustomerViewmodel>(
      model: CustomerViewmodel(ApiShop.customerList),
      appBar: (_) => xfgAppbar(title: '我的客户'),
      onInit: (data) => data.firstLoad(),
      toplessBuilder: (_, customer) => Container(
        padding: EdgeInsets.symmetric(horizontal: XfgSize().size10, vertical: XfgSize().size14),
        child: Builder(builder: (ctx) {
          final customerType = ctx.select<CustomerViewmodel, String>((k) => k.customerType);
          return Row(
            children: [
              _typeWidget('全部', CustomerType.all, customerType, customer),
              SizedBox(width: XfgSize().size10),
              _typeWidget('未消费', CustomerType.unpaid, customerType, customer),
              SizedBox(width: XfgSize().size10),
              _typeWidget('已消费', CustomerType.paid, customerType, customer),
            ],
          );
        }),
      ),
      builder: (ctx, customer) => SmartRefresher(
        controller: customer.controller,
        enablePullDown: true,
        enablePullUp: true,
        onRefresh: customer.refresh,
        onLoading: customer.loadMore,
        child: ListView.builder(
          itemCount: customer.list.length,
          itemBuilder: (_, index) {
            final model = customer.list[index];
            final isLast = index == customer.list.length - 1;
            final isPaid = (model.orderSumPayPrice?? 0) > 0;
            return Container(
              margin: EdgeInsets.fromLTRB(XfgSize().size10, 0, XfgSize().size10, isLast && XfgSize().bottomBarHeight != 0 ? XfgSize().bottomBarHeight:XfgSize().size10),
              decoration: white6Decoration,
              child: Column(
                children: [
                  Padding(
                    padding: EdgeInsets.fromLTRB(XfgSize().size10, XfgSize().size16, XfgSize().size14, XfgSize().size16),
                    child: SizedBox(
                      height: XfgSize().size56,
                      child: Row(
                        children: [
                          HttpImage(model.avatar, size: Size.square(XfgSize().size56), radius: BorderRadius.circular(XfgSize().size56)),
                          SizedBox(width: XfgSize().size8),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Row(
                                  children: [
                                    XfgText(model.nickname?? '', fontSize: XfgSize().text16, color: XfgColor.text1D, bold: FontWeight.bold),
                                    SizedBox(width: XfgSize().size10),
                                    XfgText(model.mobile?? '', fontSize: XfgSize().text14, color: XfgColor.text2),
                                    const Spacer(),
                                    XfgText(isPaid ? '消费${model.orderCount?? 0}单':'未消费', fontSize: XfgSize().text14, color: XfgColor.theme),
                                  ],
                                ),
                                XfgText('UID:${model.uid?.toString()?? '--'}', fontSize: XfgSize().text14, color: XfgColor.text2),
                                Row(
                                  children: [
                                    XfgText('加入时间', fontSize: XfgSize().text12, color: XfgColor.text3),
                                    SizedBox(width: XfgSize().size10),
                                    XfgText(model.createdAt?? '--', fontSize: XfgSize().text12, color: XfgColor.text1),
                                  ],
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                  Visibility(
                    visible: isPaid,
                    child: Container(
                      height: XfgSize().size48,
                      alignment: Alignment.centerRight,
                      padding: EdgeInsets.only(right: XfgSize().size10),
                      decoration: BoxDecoration(border: Border(top: BorderSide(width: XfgSize().size0_5, color: XfgColor.colorE))),
                      child: XfgText('合计：', fontSize: XfgSize().text16, color: XfgColor.text2, children: [
                        TextSpan(text: '¥', style: TextStyle(fontSize: XfgSize().text12)),
                        TextSpan(text: model.orderSumPayPrice?.toStringAsFixed(2)?? '0.00', style: TextStyle(fontSize: XfgSize().text20, color: XfgColor.text1, fontWeight: FontWeight.w600)),
                      ]),
                    ),
                  )
                ],
              ),
            );
          },
        ),
      ),
    );
  }

  /// 资金类型布局
  Widget _typeWidget(String text, String type, String select, CustomerViewmodel customer) => GestureDetector(
    onTap: () {
      if (select != type) {
        customer.customerType = type;
      }
    },
    child: Container(
      width: boundingTextSize(text, style: TextStyle(fontSize: XfgSize().text14)).width + XfgSize().size20,
      height: XfgSize().size33,
      decoration: BoxDecoration(
        color: XfgColor.white,
        border: select == type ? Border.all(color: XfgColor.theme, width: XfgSize().size0_5):null,
        borderRadius: BorderRadius.circular(XfgSize().size33)
      ),
      alignment: Alignment.center,
      child: XfgText(text, fontSize: XfgSize().text14, color: select == type ? XfgColor.text1D:XfgColor.text2),
    ),
  );
}
